<template>
	<view class="page_view">
		<!-- {{type}}{{id}} -->
		<view class="list-item" v-for="(item,index) in list" :key="index">
			<view class="user_pl">
				<view class="user_pl_user">
					<image class="user_pl_user_img" :src="ImgUrl+item.user.avatar" mode=""></image>
					<view class="user_pl_pl">
						<view class="user_pl_name">
							{{item.user.name}}
						</view>
						<u-rate size="10" inactiveColor="#626262" :readonly="true" gutter='2' activeColor="#0165FB"
							:count="5" v-model="item.star"></u-rate>
					</view>
				</view>
				<view class="pl_text">
					{{item.comment||item.content}}
				</view>
				<view v-if="kc_id" class="comment_flex matop">
					<view class="">
						已完成课程{{item.progress}}%
					</view>
					<view class="">
						{{item.comment_time}}
					</view>
				</view>
				<view v-else class="pingjia_img flex1">
					<image :src="ImgUrl+items"  class="pingjia_img_item" mode="" v-for="(items,indexs) in item.img"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		// find_comment_all,
		getcomment,
		getcomment2
	} from "@/api/common.js"
	export default {
		data() {
			return {
				page: 1,
				list: [],
				last_page: '',
				kc_id:0,
				id:0,
				type:0,//0积分商城订单 1商城订单
			}
		},
		onLoad(options) {
			if (options.kc_id) {
				this.kc_id = options.kc_id
			}
			if(options.id){
				this.id = options.id;
			}
			if(this.id){
				this.type = options.type;
				this.get_list2();
			}else{
				this.get_list()
			}
		},
		onShow() {

		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++;
				if(this.id){
					this.get_list2()
				}else{
					this.get_list()
				}
			}
		},
		computed: {
			ImgUrl() {
				return this.$store.state.ImgUrl
			}
		},
		methods: {
			// go_releasecommets(){
			// 	uni.navigateTo({
			// 		url:'/pages/ReleaseComments/ReleaseComments'
			// 	})
			// },
			get_list2() {
				if(this.type==0){
					getcomment({
						id: this.id,
						page: this.page,
						size:10
					}).then(res => {
						this.last_page = res.data.last_page;
						if (this.page == 1) {
							this.list = res.data.data;
						} else {
							this.list.push(...res.data.data);
						}
					})
				}else{
					getcomment2({
						id: this.id,
						page: this.page,
						size:10
					}).then(res => {
						this.last_page = res.data.last_page;
						if (this.page == 1) {
							this.list = res.data.data;
						} else {
							this.list.push(...res.data.data);
						}
					})
				}
			},
			get_list() {
				find_comment_all({
					id: this.kc_id,
					page: this.page
				}).then(res => {
					console.log(res,'quanbupinglun')
					this.last_page = res.data.comment.last_page;
					if (this.page == 1) {
						this.list = res.data.comment.data;
					} else {
						this.list.push(...res.data.comment.data);
					}
				})
			},
			// go_ReleaseComments(){
			// 	uni.navigateTo({
			// 		url:'/pages/ReleaseComments/ReleaseComments?kc_id='+this.kc_id
			// 	})
			// }
		}
	}
</script>

<style>
	.list-item {
		/* height: 276rpx; */
		border-bottom: #F4F4F4 solid 2rpx;
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		box-sizing: border-box;
	}

	.page_view {
		padding: 0 40rpx;
		box-sizing: border-box;
		padding-bottom: 100rpx;
	}

	.user_pl {
		width: 100%;
		/* margin-top: 30rpx; */
	}

	.user_pl_user {
		display: flex;
		align-items: center;
	}

	.user_pl_user_img {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background-color: #333;
	}

	.comment_flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user_pl_name {
		color: var(--unnamed, #626262);
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 22rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.user_pl_pl {
		margin-left: 20rpx;
	}

	.pl_text {
		margin-top: 24rpx;
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
	.pingjia_img{
		margin-top: 20rpx;
	}
	.pingjia_img_item{
		width: 128rpx;
		height: 128rpx;
		border-radius: 8rpx;
		background:#ccc;
		margin-right: 8rpx;
	}
	.matop {
		color: var(--unnamed, #626262);
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-top: 28rpx;
	}

	.fide {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		background: linear-gradient(180deg, #467CF8 0%, #3570F6 100%);
		box-shadow: 0px 4px 14px 0px rgba(53, 112, 246, 0.30);
		position: fixed;
		right: 40rpx;
		bottom: 68rpx;
	}

	.fide_img {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.binaji {
		width: 96rpx;
		height: 96rpx;
		border-radius: 48rpx;
		box-shadow: 0px 4px 14px 0px rgba(53, 112, 246, 0.30);
		position: fixed;
		bottom: 68rpx;
		right: 40rpx;
		background-color: #3570F6;
	}

	.binaji_img {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>